<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='pageApi' :buttons='buttons'>
       
    </BPTable>
</template>

<script lang='ts' setup>
    import { pageApi } from '@/api/BuyOrder'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import { expireTypeApi } from '@/api/Common';


    const imageUrl = import.meta.env.B_NET_STATIC_URL

    const i18n = useI18nStore()
    const resourceStore = useResourceStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const tableRef = ref()

    const currentRow = ref<any>()
    const currentCategory = ref()

    function onChangeCategory(e) {
        currentCategory.value = e
        tableRef.value.load()
    }


    const buttons = ref<SearchButton[]>([])

    buttons.value.push({
        button : 'add',
        func : () => {
            currentRow.value = null
            dialogTitle.value = '新增'
            visible.value = true
        }
    })


    const columns = ref<Column[]>([
        {
            title : '账号',
            dataIndex : 'account',
            inSearch : true,
        },



        {
            title : '分组名',
            dataIndex : 'name',
        },

        {
            title : '金额',
            dataIndex : 'price',
        },

        {
            dataIndex : 'expire',
            title : '有效期',
            customRender({record}){
                return record.expire + expireTypes.value[record.expireType]
            }
        },

        {
            title : '状态',
            dataIndex : 'enable',
        },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
        }
    ])

    const expireTypes = ref<any>({})

    expireTypeApi().then(r => {
        expireTypes.value = r
    })

    
</script>

<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>